<template>
    <div class="systemLog">
      <div>
        <el-card>
          <el-button v-if="isAdmin" @click="dialogVisible = true" class="mb-4 mr-3" type="primary"
            ><el-icon class="mr-1" color="#fff"><Plus /></el-icon>添加日志</el-button
          >
          <el-steps direction="vertical" :active="1">
            <el-step v-for="(item, index) in list" :key="index" :title="item.title">
              <template #icon>
                <div>{{list.length-index}}</div>
              </template>
              <template #description>
                <el-alert type="success" :closable="false">
                      <div class="description">
                        <div v-for="(content, i) in item.desc" :key="i">{{ content }}</div>
                      </div>
                    </el-alert>
                    <div v-if="isAdmin" class="button">
                      <el-button
                        class="operation-button"
                        type="primary"
                        size="small"
                        :underline="false"
                        @click="handleEdit(item)">
                        修改
                      </el-button>
                      <el-popconfirm
                        title="删除该方案?"
                        cancel-button-text="否"
                        confirm-button-text="是"
                        cancel-button-type="primary"
                        confirm-button-type="text"
                        @confirm="dele(item)"
                      >
                        <template #reference>
                          <el-button
                            class="operation-button"
                            type="primary"
                            size="small"
                            link
                            :underline="false"
                          >
                            删除
                          </el-button>
                        </template>
                      </el-popconfirm>
                    </div>
                </template>
            
            </el-step>
          </el-steps>
    
        </el-card>
      </div>

      <el-dialog v-model="dialogVisible" :title="log_id?'修改日志':'添加日志'" width="680px" :before-close="handleClose">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="80px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-form-item label="版本号" prop="version">
              <el-input
                  class="ya-select-field"
                  v-model="ruleForm.version"
                  placeholder="请输入版本号"
                  clearable
                  style="width: 100%"
                />
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input class="ya-select-field" v-model="ruleForm.title" placeholder="请输入标题" clearable style="width: 100%" />
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input class="ya-select-field" v-model="ruleForm.content" type="textarea" rows="10" auto-height placeholder="请输入内容" clearable style="width: 100%" />
            </el-form-item>
          </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submit">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
    import { useUserStoreHook } from '@/store/modules/user'
    import { list, add, edit, dele, info } from '@/api/system/systemLog'
    const userStore = useUserStoreHook()
    export default {
      data () {
        return {
          isAdmin: false,//判断是不是管理员
          dialogVisible: false,//添加弹窗
          log_id: '',//id
          ruleForm: {
            version: '',
            name: '',
            title: ''
          },
          rules: {
            version: [
              { required: true, message: '请输入版本号', trigger: 'blur' },
            ],
            title: [
              { required: true, message: '请输入标题', trigger: 'blur' },
            ],
            content: [
              { required: true, message: '请输入内容', trigger: 'blur' },
            ],
          },

          list: []
        }
      },
      mounted () {
        if (userStore.user.role_ids.includes(1)) {
          this.isAdmin = userStore.user.role_ids.includes(1)
        }
        this.initData()
      },
      methods: {
        // 列表
        initData () {
          list().then(res => {
            console.log(res, 'res<<<<')
            if (res.code == 200) {
              res.data.list.forEach(element => {
                element.desc = element.content.split(";\n")
              });
              this.list = res.data.list
            }
          })
        },
        // 提交
        submit () {
          this.$refs['ruleFormRef'].validate((valid) => {
            if (valid) {
              if (this.log_id)  {
                let params = {
                  log_id: this.log_id,
                  ...this.ruleForm
                }
                edit(params).then((res) => {
                  if (res.code == 200) {
                    this.initData()
                    this.dialogVisible = false
                    this.log_id = ''
                    this.getReset()
                    ElMessage.success(res.msg)
                  }
                })
              } else {
                add(this.ruleForm).then((res) => {
                  if (res.code == 200) {
                    this.initData()
                    this.getReset()
                    this.dialogVisible = false
                    ElMessage.success(res.msg)
                  }
                })
              }
            }
          })
        },
        getReset () {
          this.ruleForm = {
            version: '',
            name: '',
            title: ''
          }
        },
        // 删除
        dele(e) {
          dele({
            log_id: e.log_id
          })
            .then((res) => {
              this.initData()
              ElMessage.success(res.msg)
            })
            .catch(() => {})
        },
        // 编辑
        handleEdit (e) {
          this.log_id = e.log_id
          this.ruleForm.version = e.version
          this.ruleForm.title = e.title
          this.ruleForm.content = e.content
          this.dialogVisible = true
        }
      }
    }
  </script>
  
  <style lang="scss" scoped>
  .systemLog {
    .description {
      font-size: 16px;
      line-height: 30px;
    }
    ::v-deep .el-step__description {
      padding-right: 0;
    }
    ::v-deep .el-step__icon{
        border-radius: 50%;
        border: 2px solid;
        border-color: inherit;
    }
    ::v-deep .el-step__main{
      position: relative;
    }
    ::v-deep .el-dialog__footer{
      text-align: center;
    }
    // ::v-deep .el-form-item__label{
    //   padding: 0;
    // }
    .button{
      position: absolute;
      top: 2px;
      right: 0;
      .operation-button {
        margin-left: 6px;
        width: 48px;
        margin-top: 0;
      }
    }
  }
  </style>